<template>
	<div class="image_con">
		<div class="top_title">图片({{materialList?.length}})</div>
		<div class="upload_image" v-if="materialList?.length == 0" :style="materialItemStyle(1)" @dragleave="dragLeave" 
		@dragover.prevent="dragOver" @drop="onDrop">
			<PlusOutlined style="color: #2878FFff" v-if="dragStatus.isDragging && dragStatus.element.material_type == 'image'" />
			<span style="font-size: 14px" v-else>请从左侧拖入图片</span>
		</div>
		
		<div class="upload_image" v-else :style="materialItemStyle(2)" @dragleave="dragLeave"
		@dragover.prevent="dragOver" @drop="onDrop">
			<div class="image_list">
				<div class="image_item" @click="previewImage(item)" v-for="(item, index) in materialList" :key="index">
					<div class="image_pic" :style="imageStyle(item)"></div>
					<div class="image_text">{{item.material_name}}</div>
					<cu-icon class="operate_icon" type="icon-shanchu1"
						@click.stop="deleteImage(index)" />
				</div>
			</div>
		</div>
		<!-- 预览图片 -->
		<materialPreview :visible="previewVisible" :materialDetail="currentMaterial" @close="closePreview" />
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		nextTick,
		watch,
		ref,
		computed,
	} from "vue";
	import store from '@/store';
	import {message} from 'ant-design-vue';
	import {PlusOutlined} from '@ant-design/icons-vue';
	import materialPreview from '../../sourceMaterial/modules/materialPreview.vue';
	export default defineComponent({
		props: {
			index: {
				type: Number,
				default: 0
			}
		},
		components: {
			PlusOutlined,
			materialPreview
		},
		setup(props, context){
			const state = reactive({
				isHover: false,
				materialList: [],
				previewVisible: false,
				currentMaterial: {}
			})
			
			const deleteImage = (index) => {
				state.materialList.splice(index, 1);
			}
			
			const onDrop = (e) => {
				e.preventDefault(); // 阻止浏览器默认行为
				if (dragStatus.value.element.material_type != "image")
					return;
				let arr = state.materialList;
				let arrId = state.materialList.map((item) => item.id);
				let flag_1 = false,
					flag_2 = false;
				dragStatus.value.materialList
					.filter((item) => item.selected !== true)
					.map((item) => {
						if (item.checked && arrId.indexOf(item.id) != -1) {
							flag_1 = true;
						}
						if (item.checked && arrId.indexOf(item.id) == -1) {
							flag_2 = true;
							arr.push(item);
						}
					});
				state.materialList = arr;
				
				// 处理store
				let resource_data = store.getters.clipJSON?.resource_data
				resource_data[props.index]['images'] = arr
				store.dispatch('SetClipJSONResourceData', resource_data)
				
				if (flag_1) {
					message.success("部分素材重复添加，已自动剔除！");
				}
				if (!flag_1 && flag_2) {
					message.success("操作成功！");
				}
				dragStatus.value?.callback();
				nextTick(() => {
					state.isHover = false;
				});
			};
			
			const dragOver = () => {
				state.isHover = true;
			};
			
			const dragLeave = () => {
				state.isHover = false;
			};
			
			const dragStatus = computed(() => store.getters.dragStatus);
			const materialItemStyle = computed(() => {
				return function(type){
					return {
						border: dragStatus.value.isDragging &&
							state.isHover &&
							(dragStatus.value.element.scene_type == "image" ||
								dragStatus.value.element.material_type == "image") ?
							"1px solid #2878FFFF" :
							dragStatus.value.isDragging &&
							(dragStatus.value.element.scene_type == "image" ||
								dragStatus.value.element.material_type == "image") ?
							"1px dashed #2878FFFF" :
							`1px dashed ${type==1?'#5f5f5f':'transparent'}`,
						alignItems: type==2?'flex-start': 'enter'
					};
				}
			});
			
			const imageStyle = computed(()=>{
				return function(item){
					return{
						backgroundImage: `url(${item.material_url})`,
					}
				}
			})
			
			const previewImage = (item) => {
				state.previewVisible = true
				state.currentMaterial = item
			}
			
			const closePreview = () => {
				state.previewVisible = false
				state.currentMaterial = {}
			}
			
			watch([()=>props.index, ()=>store.getters.clipJSON?.resource_data], ([val1, val2])=> {
				let resource_data = store.getters.clipJSON?.resource_data
				if(resource_data?.length){
					state.materialList = resource_data[props.index]?.images
				} else {
					state.materialList = []
				}
			}, {
				deep: true,
				immediate: true
			})
			
			return{
				...toRefs(state),
				onDrop,
				dragOver,
				dragLeave,
				dragStatus,
				materialItemStyle,
				imageStyle,
				deleteImage,
				previewImage,
				closePreview
			}
		}
	})
</script>

<style lang="less" scoped>
	.image_con{
		width: 100%;
		height: 100%;
		.top_title{
			color: #eee;
			font-size: 14px;
		}
		.upload_image{
			width: calc(100% - 5px);
			min-height: 240px;
			margin-top: 10px;
			border: 1px dashed #999;
			color: #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.image_list{
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				transform: translateX(-5px) translateY(-5px);
				.image_item{
					width: 90px;
					height: 180px;
					margin: 5px;
					background-color: #000;
					position: relative;
					cursor: pointer;
					.image_pic{
						width: 90px;
						height: 160px;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 100% auto;
					}
					.image_text{
						width: 90px;
						height: 20px;
						display: inline-block;
						text-align: center;
						line-height: 20px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					&:hover{
						.operate_icon{
							display: block;
						}
					}
					.operate_icon{
						display: none;
						position: absolute;
						right: 5px;
						bottom: 1px;
						&:hover{
							color: #ff5262;
						}
					}
				}
			}
		}
	}
</style>